<template>
  <div class="cl">
    <header-nav :index_num="index_num"></header-nav>
    <div id="excute_box">
      <!--内容-->
      <div class="excute_con">
        <h3>一、项目申报书</h3>
        <p>
          <a :href="centers.probook?centers.probook:''" >{{probook?(probook.split('.')[0]).split('_')[0]+'.'+probook.split('.')[1]:""}}</a>
          <!-- <a :href="centers.probook?centers.probook:''" target="_blank">预览</a> -->
           <a :href="centers.probook" target="_blank">{{centers.probook.split('/')[8].split('.')[1] == 'pdf'||centers.probook.split('/')[8].split('.')[1] == 'jpeg'||centers.probook.split('/')[8].split('.')[1] == 'png'||centers.probook.split('/')[8].split('.')[1] == 'jpg'?'预览':'下载'}}</a>
        </p>
        <h3>二、项目实施方案</h3>
        <!-- probook -->
        <p>
          <a :href="centers.fangan?centers.fangan:''" >{{fangan?(fangan.split('.')[0]).split('_')[0]+'.'+fangan.split('.')[1]:""}}</a>
          <!-- <a :href="centers.fangan?centers.fangan:''" target="_blank">预览</a> -->
          <a :href="centers.fangan" target="_blank">{{centers.fangan.split('/')[8].split('.')[1] == 'pdf'||centers.fangan.split('/')[8].split('.')[1] == 'jpeg'||centers.fangan.split('/')[8].split('.')[1] == 'png'||centers.fangan.split('/')[8].split('.')[1] == 'jpg'?'预览':'下载'}}</a>
        </p>
        <h3>三、中期报告</h3>
        <h3>1、基本信息</h3>
        <aside>
          <div style="position:relative;right:30px">
               <div style="margin-bottom:15px;position:relative;right:94px">
            <label style="">项目名称:</label>
            <span style="margin-left:20px">{{zDatc.name}}</span>
            <!-- <el-input
              v-model="zDatc.name"
              name="name"
              placeholder="请输入项目名称"
              style="width:300px;margin-left:10px"
            ></el-input>-->
            <!-- <input
              type="text"
              name="name"
              readonly
              v-model="zDatc.name"
              required
              disabled
              class="division"
            />-->
          </div>
          <div style="margin-bottom:15px;position:relative;right:94px">
            <label style="">机构名称:</label>
            <span style="margin-left:20px">{{zDatc.company}}</span>
            <!-- <el-input
              v-model="zDatc.company"
              name="name"
              placeholder="请输入机构名称"
              style="width:300px;margin-left:10px"
            ></el-input>-->
            <!-- <input
              type="text"
              name="name"
              value
              v-model="zDatc.company"
              required
              disabled
              class="division"
            />-->
          </div>
          <div style="margin-bottom:15px;position:relative;right:94px">
            <label style="">申请日期:</label>
            <span style="margin-left:20px">{{zDatc.aterm}}</span>--<span>{{zDatc.fterm}}</span>
            <!-- <el-date-picker
              v-model="zDatc.month"
              type="date"
              value-format="timestamp"
              placeholder="选择日期时间"
              style="margin-left:10px;margin-bottom:10px"
            ></el-date-picker>-->

            <!-- <input type="date" name="aterm" v-model="zDatc.aterm" value required />
            <span>至</span>
            <input type="date" name="fterm" v-model="zDatc.fterm" value required />-->
          </div>
          </div>
       
         <!-- <div style="margin-bottom:15px">
            <label style="font-size:20px;white-space:nowrap;margin-left:6px">项目执行团队人员构成及分工:</label>
            <span style="font-size:15px;margin-left:20px">{{zDatc.people}}</span>
            <p v-html="centers.people"></p>
          </div> -->
        </aside>
         <!-- <h3>2、发展性状况</h3>
        <div class="rich">
          <p v-html="centers.develop"></p>
        </div>
        <h3>3、项目实施情况</h3>
        <div class="rich">
          <p v-html="centers.pro_condition"></p>
        </div>
        <h3>4、项目取得的成就</h3>
       <div class="rich">
         <p v-html="centers.result"></p>
          </div>
        <h3>5、对项目实施至今的情况总结</h3>
            <div class="rich">
              <p v-html="centers.summary"></p>
          </div> -->
        <!-- <p>{{ centers.summary }}</p> -->
        <!-- <h3>
          6、项目财务报告
          <span class="download">
            <span style="margin-left:15px;margin-right:10px"> {{caiwu?(caiwu.split(".")[0]).split('_')[0]+'.'+caiwu.split('.')[1]:''}}</span>
            <a  :href="centers.fina" target="_blank">{{centers.fina.split('/')[8].split('.')[1] == 'pdf'||centers.fina.split('/')[8].split('.')[1] == 'jpeg'||centers.fina.split('/')[8].split('.')[1] == 'png'||centers.fina.split('/')[8].split('.')[1] == 'jpg'?'预览':'下载'}}</a> 
            <!-- <a :href="centers.fina" download v-if="caiwu">下载</a> |
            <a :href="centers.fina" target="_blank" v-if="caiwu">预览</a> -->
          <!-- </span>
        </h3> -->
        <h3>
          2、中期报告
  
          <span class="download">
             <span style="margin-left:15px;margin-right:5px"> {{dianzi?(dianzi.split('.')[0]).split('_')[0]+'.'+dianzi.split('.')[1]:''}}</span>
            <!-- <a :href="centers.elereport" download>下载</a> |
            <a :href="centers.elereport" target="_blank">预览</a> -->
             <a :href="centers.elereport" target="_blank">{{centers.elereport.split('/')[8].split('.')[1] == 'pdf'||centers.elereport.split('/')[8].split('.')[1] == 'jpeg'||centers.elereport.split('/')[8].split('.')[1] == 'png'||centers.elereport.split('/')[8].split('.')[1] == 'jpg'?'预览':'下载'}}</a>
          </span>
        </h3>
        <h3>
          四、项目调整申请表及批复意见表
         
          <span class="download">
             <span style="margin-left:15px;margin-right:5px">  {{shenqing?(shenqing.split('.')[0]).split('_')[0]+'.'+shenqing.split('.')[1]:''}}</span>
            <!-- <a :href="centers.adjust" download v-if="shenqing">下载 |</a> 
            <a :href="centers.adjust" target="_blank" v-if="shenqing">预览</a> -->
            <a v-if="shenqing" :href="centers.adjust" target="_blank">{{centers.adjust.split('/')[8].split('.')[1] == 'pdf'||centers.adjust.split('/')[8].split('.')[1] == 'jpeg'||centers.adjust.split('/')[8].split('.')[1] == 'png'||centers.adjust.split('/')[8].split('.')[1] == 'jpg'?'预览':'下载'}}</a>
          </span>
        </h3>
        <h3>五、活动类/培训类/会议类材料</h3>
        <p v-if='centers.ziliao[0].name ==""' style='color:blue;font-size:14px;'>暂未上传</p>
        <h3 v-for="(i,j) in centers.ziliao" :key="j" v-if='centers.ziliao[0].name !==""'>
          <p>活动名称{{j+1}}:{{i.name}}</p>
          <!-- {{i.elereport.split('/')[8].split('_')}} -->
          <span :href="i.elereport?i.elereport:''" style="margin-left:-1px;font-size:14px;color: #7471ef;">{{i.elereport?(i.elereport.split('/')[8].split('_')[1]?(i.elereport.split('/')[8]).split('_')[0]+'.'+i.elereport.substr(i.elereport.lastIndexOf('.')+1):(i.elereport.split('/')[8])):''}}</span> 
          <!-- <a :href="i.elereport?i.elereport:''" style="margin-left:-1px">{{i.elereport?(i.elereport.split('/')[8]).split('_')[0]+'.'+i.elereport.substr(i.elereport.lastIndexOf('.')+1):''}}</a>  -->
          <span class="download" >
            <!-- <a :href="i.elereport" download v-if="i.elereport">下载 |</a> 
            <a :href="i.elereport" target="_blank" v-if="i.elereport">预览</a> -->
            <a  v-if="i.elereport" :href="i.elereport" target="_blank">{{i.elereport.split('/')[8].split('.')[1] == 'pdf'||i.elereport.split('/')[8].split('.')[1] == 'jpeg'||i.elereport.split('/')[8].split('.')[1] == 'png'||i.elereport.split('/')[8].split('.')[1] == 'jpg'?'预览':'下载'}}</a>
          </span>
        </h3>
        <!-- <h3>
          呵呵呵的爱心活动
          <span class="download">
            <a href="#" download>下载</a> |
            <a href="#">预览</a>
          </span>
        </h3>
        <h3>
          呵呵呵的爱心活动
          <span class="download">
            <a href="#" download>下载</a> |
            <a href="#">预览</a>
          </span>
        </h3> -->
        <h3>
          六、政购项目专项资金收支情况表
          <span class="download">
             <span style="margin-left:15px;margin-right:5px">  {{midcaiwu?(midcaiwu.split('.')[0]).split('_')[0]+'.'+midcaiwu.split('.')[1]:""}}</span>
            <!-- <a :href="centers.budget" download  v-if="midcaiwu">下载</a> |
            <a :href="centers.budget" target="_blank" v-if="midcaiwu">预览</a> -->
             <a v-if="midcaiwu" :href="centers.budget" target="_blank">{{centers.budget.split('/')[8].split('.')[1] == 'pdf'||centers.budget.split('/')[8].split('.')[1] == 'jpeg'||centers.budget.split('/')[8].split('.')[1] == 'png'||centers.budget.split('/')[8].split('.')[1] == 'jpg'?'预览':'下载'}}</a> 
          </span>
        </h3>
        <h3>
          七、其他类
          <span class="download">
             <span style="margin-left:15px;margin-right:5px">  {{qita?(qita.split(".")[0]).split('_')[0]+'.'+qita.split('.')[1]:''}}</span>
            <!-- <a :href="centers.other" download v-if="qita">下载</a> |
            <a :href="centers.other" target="_blank" v-if="qita">预览</a> -->
             <a v-if="qita" :href="centers.other" target="_blank">{{centers.other.split('/')[8].split('.')[1] == 'pdf'||centers.other.split('/')[8].split('.')[1] == 'jpeg'||centers.other.split('/')[8].split('.')[1] == 'png'||centers.other.split('/')[8].split('.')[1] == 'jpg'?'预览':'下载'}}</a>
          </span>
        </h3>
        <h3>
          八、中期PPT文件
          <span class="download" v-if="ppt">
                <span style="margin-left:15px;margin-right:5px">  {{ppt?(ppt.split('.')[0]).split('_')[0]+'.'+ppt.split('.')[1]:""}}</span>
            <!-- <a :href="centers.PPT" download v-if="ppt">下载</a> |
            <a :href="centers.PPT" target="_blank" v-if="ppt">预览</a> -->
            <a v-if="ppt" :href="centers.PPT" target="_blank">{{centers.PPT.split('/')[8].split('.')[1] == 'pdf'||centers.PPT.split('/')[8].split('.')[1] == 'jpeg'||centers.PPT.split('/')[8].split('.')[1] == 'png'||centers.PPT.split('/')[8].split('.')[1] == 'jpg'?'预览':'下载'}}</a>
          </span>
           <span v-else style="font-size:14px;color:blue">暂未上传</span>
        </h3>
      </div>
      <section id="preview" v-if="popupStatus">
        <div class="tc" @click="preview()"></div>
        <section class="tc-text">
          <a
            v-for="(list, index) in dataFile"
            :key="index"
            :href="list.url"
            target="_blank"
          >{{ list.url }}</a>
        </section>
        <!-- <img class="tc-text" :src="zData.proimages" /> -->
      </section>
      <section id="popup" v-if="pop" @click="popUp()">
        <aside @click.stop>
          <img :src="linkData" alt />
        </aside>
      </section>
    </div>
    <footer-nav class="footer"></footer-nav>
  </div>
</template>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<script>
import HeaderNav from "../../components/HeaderNav";
import FooterNav from "../../components/FooterNav";
const path = require("path");
const files = require.context("@/components", false, /\.vue$/);
const modules = {};
files.keys().forEach(key => {
  const names = path.basename(key, ".vue");
  modules[names] = files(key).default || files(key);
});
var preD = function(e) {
  e.preventDefault();
};
export default {
  // components: {
  //   HeaderNav,
  //   FooterNav
  // },
  components: modules,
  data() {
    return {
      index_num: 2,
      sub: 0,
      name: " ",
      probook:'',
      fangan:'',
      info: ["1"],
      zDatc: [],
      zDatb: [],
      dataFile: null,
      id: null,
      fileName: null,
      centers: null,
      linkData: "",
      popupStatus: false,
      pop: false,
      informVal: "aaaa",
      goalsVal:"",
      effectVal:'',
       plementVal: "",
       ifupdate:true,
       caiwu:"",
       dianzi:"",
       shenqing:"",
       midcaiwu:"",
       qita:"",
       ppt:""

    };
  },
  created() {
    this.GetListImg();
    this.getCenter()
  },
  methods: {
    inform(data) {
      console.log(data, "e");
      this.infomrText = data;
    },
    inform2(data) {
      console.log(data, "111111e");
      this.team = data;
    },
      goals(data) {
      this.goalsText = data;
    },
    preview() {
      this.popupStatus = !this.popupStatus;
    },
       effect(data) {
      this.effectText = data;
    },
        plement(data) {
      this.plementText = data;
    },
    aterm() {},
    fterm() {},
    getData() {
      this.$http({
        method: "post",
        url: "v1/project/details",
        data: {
          id: this.id
        }
      })
        .then(res => {
          console.log(res, 234568);

          if (res.data.data.code === 200) {
            this.zDatc = res.data.data.data.ProjectDetails;
            console.log(this.zDatc, 256);
          } else {
            alert("请求失败！");
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    getCenter() {
      this.$http({
        method: "get",
        url: "v1/pro/center",
        params: {
          // id: 83,
          id: this.id,
          category: "center"
        }
      })
        .then(res => {
          if (res.data.data.code === 200) {
            console.log(res.data.data.data[0].status)
            if(res.data.data.data[0].status == 1000){
              let data = res.data.data.data[0];
                this.centers = data;
                console.log(this.centers);
                this.probook = this.centers.probook.substring(
                  this.centers.probook.lastIndexOf("/") + 1
                );
                this.fangan = this.centers.fangan.substring(
                  this.centers.fangan.lastIndexOf("/") + 1
                );
                  this.caiwu = this.centers.fina.substring(
                  this.centers.fina.lastIndexOf("/") + 1
                );
                  this.dianzi = this.centers.elereport.substring(
                  this.centers.elereport.lastIndexOf("/") + 1
                );
                    this.shenqing = this.centers.adjust.substring(
                  this.centers.adjust.lastIndexOf("/") + 1
                );
                    this.midcaiwu = this.centers.budget.substring(
                  this.centers.budget.lastIndexOf("/") + 1
                );
                        this.qita = this.centers.other.substring(
                  this.centers.other.lastIndexOf("/") + 1
                );
                if(this.centers.PPT){
                  this.ppt = this.centers.PPT.substring(
                  this.centers.PPT.lastIndexOf("/") + 1
                );
                }
            }else{
               this.$message.error("当前页面未提交暂时无法查看！");
               this.$router.push({path: `/schedule${this.id}`});
            }
            
          } else {
            this.$message.error("当前页面未提交暂时无法查看！");
            //  this.$jParams("schedule", { id: this.id, mid_sub: 1 });
            this.$router.push({path: `/schedule${this.id}`});
          }
        })
        .catch(err => {
          console.log(err);
        });
    }, //预览
    popUp(link) {
      console.log(link);
      this.pop = !this.pop;
      this.linkData = link;
    }
  },
  created() {
    this.id = this.$route.query.id;
    this.getData();
    this.getCenter();
  }
};
</script>
<style lang="scss" scoped>
.rich {
  margin-bottom: 105px;
}
#preview {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0%;
  left: 0%;
  z-index: 999;

  .tc {
    width: 100%;
    height: 100%;
    background-color: rgba($color: #000, $alpha: 0.58);
    position: fixed;
    top: 0%;
    left: 0%;
  }

  .tc-text {
    // width: 350px;
    // width:100%;
    padding: 30px;
    box-sizing: border-box;
    height: auto;
    background-color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);

    a {
      display: inline-block;
      margin-top: 10px;
      cursor: pointer;
    }
  }
}
#excute_box {
  width: 100%;
  .excute_con {
    width: 1200px;
    margin: 0 auto;
    padding: 50px 30px;
    background: white;
    margin-top: 50px;
    margin-bottom: 50px;
    h3 {
      line-height: 260%;
      font-size: 20px;
    }
    p a {
      line-height: 10%;
      color: #7471ef;
      font-size: 14px;
      margin-right: 10px;
    }
    label {
      margin-left: 16px;
      font-family: "MicrosoftYaHei";
      font-size: 14px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 25px;
      letter-spacing: 0px;
      color: #333333;
      text-align: right;
      display: inline-block;
      width: 200px;
    }
    input {
      box-sizing: border-box;
      width: 33.8%;
      height: 35px;
      background-color: #ffffff;
      border: solid 1px #c7c7c7;
      outline: none;
      margin-left: 35px;
      margin-bottom: 15px;
      font-family: "MicrosoftYaHei";
      font-size: 18px;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0px;
      color: #323232;
      margin-right: 35px;
    }
    .division {
      width: 76%;
    }
    span {
      // font-size: 18px;
    }
    span a {
      color: #7471ef;
    }
    p {
      font-size: 17px;
      color: #666;
      line-height: 30px;
    }
    .download {
      color: #7471ef;
      padding-left: 30px;
      font-size: 14px;
    }
  }
}
</style>
